<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF - 8" />
    <meta
      name="viewport"
      content="width=device - width, initial - scale = 1.0"
    />
    <title>GSAP SplitText by Characters</title>
    <script src="./gsap.min.js"></script>
    <script src="./SplitText.min.js"></script>
    <style>
      span.character {
        display: inline - block;
      }
    </style>
  </head>

  <body>
    <h1 id="text - to - split">14. 公路路产损失赔偿中，哪些因素可能影响赔偿金额？</h1>
    <script>
      // use a script tag or an external JS file
      document.addEventListener("DOMContentLoaded", (event) => {
        gsap.registerPlugin(SplitText);
        // gsap code here!

        const textElement = document.getElementById("text - to - split");
        const splitText = new SplitText(textElement, { type: "chars" });
        const chars = splitText.chars;
        gsap.to(chars, {
          y: -50,
          duration: 1,
          ease: "power2.out",
          stagger: 0.1,
        });
      });
    </script>
  </body>
</html>
